{% extends "personal_center/profile.html" %}

{% block page_link %}
    <script src="../../static/personal_center/js/attendance.js"></script>
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }
        th:first-child{
            z-index:2;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="my_attendance.html" style="color: #0b0b0b;">
                <i class="iconfont icon-kaoqinliuchengtongji"></i>
                <span> 我的考勤</span>
            </a>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 95%;">
        <div style="height: 98%;width: 100%;overflow: auto;">
            <table class="table table-hover table-bordered" style="border-collapse: collapse;">
                <thead>
                    <tr>
                        <th scope="col" style="width: 3%;">序号</th>
                        <th scope="col" style="width: 8%;">日期</th>
                        <th scope="col" style="width: 5%;">签到时间</th>
                        <th scope="col" style="width: 10%;">签到方式</th>
                        <th scope="col" style="width: 10%;">签到状态</th>
                        <th scope="col" style="width: 10%;">签到类型</th>
                    </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table"></tbody>
            </table>
            <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                <div style="margin-top: 10%;">
                    <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                    <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        var returnList = {{ returnList | safe }};
        var t_table = document.getElementById("t_table");
        deltr();
        if (returnList.length === 0){
            document.getElementById("img-display").style.display = "inline-block";
        }else {
            document.getElementById("img-display").style.display = "none";
        }
        for (var i=0; i<returnList.length; i++){
            var tr = document.createElement("tr");
            var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");
            td.innerHTML = i+1;td.style.textAlign = "center";
            td1.innerHTML = returnList[i]["punch_time"];td1.title = returnList[i]["punch_time"];td1.style.textAlign = "center";
            td2.innerHTML = returnList[i]["sign_time"];td2.title = returnList[i]["sign_time"];td2.style.textAlign = "center";
            td3.innerHTML = returnList[i]["sign_way"];td3.title = returnList[i]["sign_way"];td3.style.textAlign = "center";
            td4.innerHTML = returnList[i]["work_status"];td4.title = returnList[i]["work_status"];td4.style.textAlign = "center";
            td5.innerHTML = returnList[i]["sign_type"];td5.title = returnList[i]["sign_type"];td5.style.textAlign = "center";
            tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);
            t_table.appendChild(tr);
        }

        // 删除列表
        function deltr(){
            var tb = document.getElementById('t_table');
            var rowNum=tb.rows.length;
            for (i=0;i<rowNum;i++) {
                tb.deleteRow(i);
                rowNum=rowNum-1;
                i=i-1;
            }
        }
    </script>
{% endblock %}
